{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal" name="add_rule" id="add_rule">
                        <div class="form-group">
                            <label class="col-sm-3 control-label yanse">所属父级</label>
                            <div class="col-sm-5">
                                <select name="pid[]" class="form-control m-b chosen-select" multiple id="groupid">
                                    <option value="0" >顶级菜单</option>
                                    {foreach name="admin_rule" item="v"}
                                    <option value="{$v.id}" {eq name="id" value="$v.id"}selected{/eq} >{$v.title}</option>
                                    {/foreach}
                                </select>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                                <a id="myEditors" style="color:#A94543"></a>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">菜单名称</label>
                            <div class="col-sm-5">
                                <input type="text" name="title" id="title" placeholder="输入菜单名称" class="form-control"/>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">节点</label>
                            <div class="col-sm-5">
                                <textarea name="name" id="name" type="text" rows="3" placeholder="模块/控制器/方法 (一级节点添加“#” 二级节点添加“##”)" class="form-control"></textarea>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label icon">图标</label>
                            <div class="col-sm-5">
                                <div class="input-group">
                                    <input type="text" name="css" id="css" placeholder="选择菜单前显示的图标" class="form-control"/>
                                    <div class="input-group-btn">
                                        <a class="btn btn-info btn-outline" onclick="selectIcon()">
                                            选择图标
                                        </a>
                                    </div>
                                </div>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                                <a id="myCss" style="color:#A94543"></a>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">排&nbsp;序</label>
                            <div class="col-sm-5">
                                <input type="text" name="sort" id="sort" value="50" placeholder="输入排序" class="form-control"/>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">状&nbsp;态</label>
                            <div class="col-sm-5">
                                <div class="radio ">
                                    <input type="checkbox" name='status' value="1" class="js-switch" checked />&nbsp;&nbsp;默认开启
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-5 col-sm-offset-3">
                                <button class="btn btn-primary addBtt" type="submit"><i class="fa fa-save"></i> 保存</button>&nbsp;&nbsp;&nbsp;
                                <a class="btn btn-danger" href="javascript:history.go(-1);" ><i class="fa fa-close"></i> 关闭</a>
                            </div>
                        </div>
                    </form>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<!--选择图标-->
<div id="chooseicon" style="display:none">
    <div>
        <ul class="list-inline"><li data-font="#" data-toggle="tooltip" data-original-title="占位符" data-placement="bottom" onclick="choseThis(this)">#</li></ul>
    </div>
</div>
{include file="public/footer" /}
<script>
    //选择图标
    function selectIcon(){
        var index = wk.layer_show1('选择图标',$('#chooseicon'),700);
        $.each(Icon,function (index,item){
            var html = "";
            html = '<li data-font="' + item + '" data-toggle="tooltip" data-original-title="' + item + '" data-placement="bottom" onclick="choseThis(this)"><i class="' + item + '"></i></li>'
            $('.list-inline').append(html);
        })
        $("[data-toggle='tooltip']").tooltip();
    }
    function choseThis(obj){
        if($('#css').val() == ""){
            $('#css').val($(obj).attr('data-font'));
        }else{
            $('#css').val($('#css').val() + ',' + $(obj).attr('data-font'));
        }
        $('.icon').css("color","#686B6D");
        $("input[name=css]").css("border","1px solid #CBD5DD");
        $("#myCss").css("display", "none");
        layer.closeAll();
    }
</script>
<script>
    $('.addBtt').click(function(){
        var level = $("#groupid").val();
        var css = $("#css").val();
        if(level == null){
            $('.yanse').css("color","#ED5666");
            $('#groupid_chosen').children().eq(0).css("border","1px solid #ED5666");
            $("#myEditors").css("display","");
            $("#myEditors").html("<i class='fa fa-times-circle'></i> 请选择所属父级");
        }
        if(css == ""){
            $('.icon').css("color","#ED5666");
            $("input[name=css]").css("border","1px solid #ED5666");
            $("#myCss").css("display","");
            $("#myCss").html("<i class='fa fa-times-circle'></i> 请选择图标");
        }
    })
    $("#groupid").change(function(){
        $('.yanse').css("color","#686B6D");
        $('#groupid_chosen').children().eq(0).css("border","1px solid #CBD5DD");
        $("#myEditors").css("display", "none");
    })
    $("input[name=css]").change(function(){
        $('.icon').css("color","#686B6D");
        $(this).css("border","1px solid #CBD5DD");
        $("#myCss").css("display", "none");
    })
    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
            $(e).closest(".form-control").css("color","#737373");
        },
        success: function(e) {
            // e.closest(".form-group").removeClass("has-error").addClass("has-success")
            e.closest(".form-group").removeClass("has-error")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
            if(r.is("#groupid")){
                e.appendTo(r.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    }), $().ready(function() {
        var e = "<i class='fa fa-times-circle'></i> ";
        jQuery.validator.addMethod("selectNoe", function(value, element) {
            var returnVal = true;
            var level = $("#groupid").val();
            alert(level);
            if(level==null){
                returnVal = false;
            }
            return returnVal;
        }, e+"请选择所属父级");
        $("#add_rule").validate({
            rules: {
                title: {
                    required: !0,
                },
                name: {
                    required: !0,
                },
                sort: {
                    required: !0,
                },
                pid :{
                    required:!0,
                    selectNoe:true,
                }
            },
            messages: {
                title: {
                    required: e + "请输入菜单名称",
                },
                name: {
                    required: e + "请输入模块/控制器/方法",
                },
                sort: {
                    required: e + "请输入排序",
                }
            },
            submitHandler: function(form) { //通过之后回调
//进行ajax传值
                var level = $("#groupid").val();
                var css = $("#css").val();
                if(level == null){
                    $('.yanse').css("color","#ED5666");
                    $('#type_chosen').children().eq(0).css("border","1px solid #ED5666");
                    $("#myEditors").css("display","");
                    $("#myEditors").html("<i class='fa fa-times-circle'></i> 请选择所属父级");
                    return false;
                }
                if(css == ""){
                    $('.icon').css("color","#ED5666");
                    $("input[name=css]").css("border","1px solid #ED5666");
                    $("#myCss").css("display","");
                    $("#myCss").html("<i class='fa fa-times-circle'></i> 请选择图标");
                    return false;
                }
                $('button').attr('disabled', 'disabled');
                $.ajax({
                    url: "{:url('add_rule')}",
                    type: "post",
                    dataType: "json",
                    data: $("#add_rule").serialize(),
                    success: function (res) {
                        if (res.code == 200) {
                            wk.success(res.msg,1,"{:url('menu/index')}");
                        } else if (res.code == 100) {
                            $('button').removeAttr('disabled');
                            wk.error(res.msg,2,'');
                            return false;
                        }
                    }
                });
            },
        })
    });
</script>
</body>
</html>